<template>
  <div>
    <p class="title">推荐歌单</p>
    <van-row gutter="6" type="flex" justify="space-between">
      <van-col span="8" v-for="(item, index) in list" :key="index">
        <van-image fit="cover" :src="item.picUrl"></van-image>
        <p class="song_name">{{ item.name }}</p>
      </van-col>
    </van-row>

    <!-- 最新音乐 -->
    <p class="title">最新音乐</p>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list2" :key="item.id">
        <div class="song_item_wrap">
          <div class="song_left">
            <p>{{ item.name }}</p>
            <p>
              <span>{{ item.song.artists[0].name }} - </span>
              <span>{{ item.song.album.name }}</span>
            </p>
          </div>
          <div class="song_right">
            <i class="iconfont icon-bofang"></i>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>



<script>
import { RecommendSongAPI, NewSongAPI } from "@/Api";
export default {
  data() {
    return {
      list: [],
      list2: [],
      loading: false,
      finished: false,
    };
  },
  async created() {
    const res = await RecommendSongAPI();
    this.list = res.data.result;
  },
  methods: {
    async onLoad() {
      const res1 = await NewSongAPI();
      this.list2 = res1.data.result;
      this.finished = true;
    },
  },
};
</script>


<style scoped>
.title {
  padding: 0.266667rem 0.24rem;
  margin: 0 0 0.24rem 0;
  background-color: #eee;
  color: #333;
  font-size: 15px;
}
.song_name {
  margin-bottom: 0.267rem;
  /* display: -webkit-box; */
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  font-size: 0.346667rem;
  padding: 0 0.08rem;
  display: -webkit-box;
}
.van-col--8 {
  width: 32% !important;
}

/*歌单样式*/
.song_item_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 歌曲列表 */
.song_right {
  padding-right: 0.266667rem;
  line-height: 1.066667rem;
}

/* 歌曲_名字 */
.song_left {
  width: 8rem;
}
.song_left p:first-child {
  font-size: 0.453333rem;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song_left p:last-child {
  font-size: 0.32rem;
  color: #888;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 播放图标 */
.song_right i {
  display: inline-block;
  transform: scale(1.3);
}
</style>